<%= content_for :stylesheets do %>
<link rel='stylesheet' type='text/css' href='/stylesheets/fullcalendar.css' />
<link rel='stylesheet' type='text/css' href='/stylesheets/fullcalendar.print.css' media='print' />
<% end %>

<%= content_for :javascript do %>
  <script type='text/javascript' src='/javascripts/jquery-ui-1.8.23.min.js'></script>
  <script type='text/javascript' src='/javascripts/fullcalendar.min.js'></script>
 
  <script type="text/javascript">
    
    var addDocumentPopup = null;
    
    $(document).ready(function () {

      $(".calendario").click(function (e) {          
          $('#calendar').fullCalendar( 'refetchEvents' );
      });
    });  
    
  </script>
  <script type='text/javascript'>     
      $(document).ready(function() {        
        $('#calendar').fullCalendar({
          header: {
            left: 'prev,next today',
            center: '',
            right: 'title'
          },
          buttonText: {
            today:    'Hoy',
            month:    'Mes',
            week:     'Semana',
            day:      'Día'              
          },
          monthNames: ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio','Agosto', 'Setiembre', 'Octubre', 'Noviembre', 'Diciembre'],
          monthNamesShort: ['Ene', 'Feb', 'Mar', 'Abr', 'May', 'Jun', 'Jul', 'Ago', 'Sep', 'Oct', 'Nov', 'Dic'],
          dayNames: ['Domingo', 'Lunes', 'Martes', 'Miércoles','Jueves', 'Viernes', 'Sábado'],
          dayNamesShort: ['Dom', 'Lun', 'Mar', 'Mie', 'Jue', 'Vie', 'Sab'],
          editable: false,
          events: {
            url: App.contextPath + '/events.json'
          },
          eventRender: function(event, element) {
            element.find('.fc-event-title').html('<a href="'+event.document+'" target="_blank" title="'+event.description+'">'+event.title+'</a>'); 
          }
        }); 
        
        $(".fc-header-center").append('<div style="width:10px;height: 10px;float:left;background-color:#36c;margin: 5px;"></div><div style="float:left; margin-right:10px;">Agendas de Comisión</div>');
        $(".fc-header-center").append('<div style="width:10px;height: 10px;background-color:#d7031e;float:left;margin: 5px;"></div><div style="float:left; margin-right:10px;">Agendas de Pleno</div>');
        $(".fc-header-center").append('<div style="width:10px;height: 10px;background-color:gray;float:left;margin: 5px;"></div><div style="float:left;">Agendas Comsión Permanente</div>');
        
      });
    </script>  
  
<% end %>        

<div>
  
  <div class="clearfix"></div>
  
  <div class="clearfix"></div>
</div>
<br/>
<div id='calendar'></div>